<template>
  <div class="dish-category-page">
    <!-- 左侧分类列表 -->
    <div class="category-list">
      <div
          v-for="category in categories"
          :key="category.dishCategoryId"
          class="category-item"
          :class="{ active: activeCategoryId === category.dishCategoryId }"
          @click="handleCategoryClick(category.dishCategoryId)"
      >
        {{ category.name }}
      </div>
    </div>

    <!-- 右侧菜品信息 -->
    <div class="dish-list">
      <!-- 搜索框 -->
      <div class="search-box">
        <el-input
            v-model="searchKeyword"
            placeholder="搜索菜品名称"
            clearable
            @keyup.enter="handleSearch"
            class="search-input"
        >
          <template #append>
            <el-button @click="handleSearch">搜索</el-button>
          </template>
        </el-input>
      </div>

      <!-- 菜品列表 -->
      <div v-if="loading" class="loading-spinner">加载中...</div>
      <div v-else>
        <div class="dish-grid">
          <div v-for="dish in dishes" :key="dish.dishId" class="dish-card">
            <el-image :src="dish.imageUrl" fit="cover" class="dish-image"/>
            <div class="dish-details">
              <h3 class="dish-name">{{ dish.name }}</h3>
              <p class="dish-price">价格：{{ dish.price }}元</p>
              <p class="dish-description">{{ dish.description }}</p>
              <div class="dish-actions">
                <el-button type="primary" @click="addToCart(dish)">加入购物车</el-button>
                <el-button type="success" @click="order(dish)">立即购买</el-button>
              </div>
            </div>
          </div>
        </div>
        <div v-if="hasMore" class="load-more" @click="loadMore">
          加载更多
        </div>
        <div v-else class="no-more">
          没有更多数据了
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, watch} from 'vue';
import {apiGet} from '@/utils/api';
import type {Dish, DishCategory} from '@/types/entity';
import { addToCart, order } from '@/utils/cartAndOrder';

// 定义响应式的分类列表
const categories = ref<DishCategory[]>([]);
// 定义响应式的菜品列表
const dishes = ref<Dish[]>([]);

// 分页参数
const page = ref(1);
const pageSize = ref(10); // 每页显示10条数据
const hasMore = ref(true); // 是否还有更多数据
// 搜索关键词
const searchKeyword = ref('');
// 加载状态
const loading = ref(true);

// 当前选中的分类ID
const activeCategoryId = ref<number | null>(null);

// 从后端获取分类数据
const fetchCategories = async () => {
  const {data} = await apiGet('/dishCategory/findAllCategory');
  categories.value = data;
  if (data.length > 0) {
    activeCategoryId.value = data[0].dishCategoryId; // 默认选中第一个分类
    await fetchDishes();
  }
};

// 从后端获取菜品数据
const fetchDishes = async () => {
  let parameter = {
    page: page.value,
    limit: pageSize.value,
    keyword: searchKeyword.value,
    dishCategoryId: activeCategoryId.value,
  };
  const {data} = await apiGet('/dish/findAll', parameter);
  if (data.data.length > 0) {
    dishes.value = [...dishes.value, ...data.data];
  } else {
    hasMore.value = false;
  }
  loading.value = false;
};

// 加载更多数据
function loadMore() {
  page.value += 1; // 加载下一页
  fetchDishes();
}

// 处理分类点击
function handleCategoryClick(categoryId: number) {
  activeCategoryId.value = categoryId;
  page.value = 1; // 重置分页
  hasMore.value = true; // 重置是否有更多数据
  dishes.value = []; // 清空当前数据
  fetchDishes();
}

// 处理搜索
function handleSearch() {
  page.value = 1; // 重置分页
  hasMore.value = true; // 重置是否有更多数据
  dishes.value = []; // 清空当前数据
  fetchDishes();
}

// 在组件挂载时获取数据
onMounted(() => {
  fetchCategories();
});
</script>

<style scoped>
.dish-category-page {
  display: flex;
  height: 100vh;
}

.category-list {
  width: 15%;
  background-color: #f5f5f5;
  padding: 20px;
  border-right: 1px solid #ddd;
  overflow-y: auto;
}

.category-item {
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.category-item:hover {
  background-color: #e1e1e1;
}

.category-item.active {
  background-color: #409eff;
  color: white;
}

.dish-list {
  width: 85%;
  padding: 20px;
  overflow-y: auto;
}

.search-box {
  margin-bottom: 20px;
}

.search-input {
  width: 400px;
}

.dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.dish-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.dish-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.dish-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.dish-details {
  padding: 16px;
}

.dish-name {
  margin: 0;
  font-size: 1.2rem;
  color: #333;
}

.dish-price {
  margin: 4px 0;
  font-size: 1rem;
  color: #666;
}

.dish-description {
  margin: 4px 0;
  font-size: 0.9rem;
  color: #888;
}

.dish-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.load-more,
.no-more {
  text-align: center;
  padding: 10px;
  margin-top: 20px;
  background-color: #f1f1f1;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.load-more:hover {
  background-color: #e1e1e1;
}

.no-more {
  cursor: default;
  color: #888;
}

.loading-spinner {
  text-align: center;
  font-size: 1.2rem;
  color: #666;
  padding: 20px;
}
</style>